<template>
  <scroll-view class="index fg1 hf" scroll-y>
    <view class="content fg1 xw zb">
      <view class="fg1 xw zb searchswiper">
        <Search class="wf" />
        <swiper class="swiper" :style="bannerStyle" circular :indicator-dots="true" :autoplay="true" :interval="5000"
          :duration="500">
          <swiper-item class="swiper-item" v-for="(i, ii) in banner" :key="ii" @click="clk(i)">
            <image class="swiper-item-image whf" :src="i.url" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </view>
      <view class="card">
        <image class="img" :src="urls.card" mode="scaleToFill" @click="card" />
      </view>

      <view class="h-title">好物推荐</view>
      <view class="w45" v-for="i in data" :key="i.id">
        <GoodsItem :modelValue="i" class="wf" />
      </view>
      <view class="hr"></view>
      <rich-text :nodes="indexDes" />
    </view>
  </scroll-view>
</template>
<script lang="ts" setup>
  import { ref, computed } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import GoodsItem from "@/components/GoodsItem.vue";
  import Search from "@/components/Search.vue";
  import { strParse, apiUrl, formatUrl } from "@/util";
  const data = ref<gt.sql.goods[]>([]),
    bannerStyle = ref("height:10em;"),
    urls = computed(() => {
      const r = {
        card: "/static/card.png",
      };
      Object.keys(r).forEach(k => { r[k] = formatUrl(r[k], apiUrl); });
      return r;
    }),
    indexDes = ref(""),
    banner = ref<gt.components.Banner[]>([{ title: "", link: "", url: "https://zxm.qhwoyoung.com/favicon.ico" }]);
  function clk(p: gt.components.Banner) {
    if (p && p.link) {
      uni.reLaunch({ url: p.link });
    }
  }
  async function fetch(p?: obj) {
    getSetting("banner").then(e => {
      const d: gt.components.Banner[] = strParse(e, []);
      d.forEach(ee => { ee.url = fUrl(ee.url); });
      if (d.length) {
        banner.value = d;
      }
    });
    getSetting("indexDes").then(e => {
      indexDes.value = e;
    });
    uni.showLoading({ title: "加载中,请稍后..", mask: true });
    const rules: gt.Rp<gt.sql.goods> = { "#page": { current: 1, size: 10 }, "#order": [["createTime", "DESC"]] } as any;
    const goods = await gd.goods.read(rules);
    data.value = goods.data;
    uni.hideLoading();
    if (p && p.cg && parseInt(p.cg) === 1 && p.gid) {
      try {
        uni.showLoading({ title: "正在创建商户,请稍后..", mask: true });
        const r = await api.request(p, "group/cg");
        if (r && r.data) {
          api.me = await format.user(r.data);
        }
      } catch (_) {
      }
      uni.hideLoading();
    }
    try {
      const w = uni.getWindowInfo().safeArea.width;
      if (w > 0) {
        bannerStyle.value = `height:${w * 0.44}px;`;
      }
    } catch (_) { }
  }
  function card() {
    uni.navigateTo({ url: "/pages3/card" });
  }
  onLoad(fetch);
</script>
<style lang="scss" scoped>
  .content {
    padding: 0 1em;
  }
  .searchswiper {
    background-image: linear-gradient(to bottom, #FFFFFF, #F8F8F8);
    margin: 0 -1em;
  }
  .index {
    box-sizing: border-box;
    .content {
      width: 100%;
      background-color: #f8f8f8;
    }
  }
  .card {
    width: 100%;
    height: 6em;
    text-align: center;
    >.img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .w45 {
    width: 48%;
    margin: 0.3em .5%;
  }
  .h-title {
    font-size: 1em;
    font-weight: 700;
    color: #f44336;
    width: 100%;
    text-align: center;
    padding: 1em 0 0 0;
  }
  .swiper {
    width: 100%;
    margin: .8em 0;
    border-radius: .3em;
    overflow: hidden;
    .swiper-item {
      .swiper-item-image {
        width: 100%;
      }
    }
  }
  .hr {
    height: 1em;
    width: 100%;
  }
</style>
